<template>
<div class="container">
    <div class="header">
        <NavBar title="我的积分" left-arrow color="#333333" @click-left="back" @click-right="backHome">
            <template #right>
                <Icon name="wap-home-o" size="20" />
            </template>
        </NavBar>
    </div>
    <div class="main">
        <div class="jifen-card flex align-items space-between" :style="{'background-image':'url('+jfBg+')'}">
            <div class="left flex align-items flex-start">
                <span class="spa">积分余额</span>
                <span class="spb">{{ jifen }}</span>
                <span class="spc" @click='toWalletInfo'>积分说明 ></span>
            </div>
            <div class="right fn-ctr" @click='tojifenchange'>转余额</div>
        </div>
       
        <div class="list" v-if='list.length > 0'>
            <List  v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList(false)">
                <div class="item flex align-items space-between" v-for='(item,idx) in list' :key='idx' >
                    <div class="left flex1">
                        <div class="txt">{{ item.title }}</div>
                        <div class="time">{{ item.add_time_text }}</div>
                    </div>
                    <div class="right-a">{{ item.change_type_text }}{{ item.score }}</div>
                </div>
            </List>
        </div>
        <Empty v-show='noData' description="暂无记录" />
    </div>
</div>
</template>

<script>
import {
    NavBar,
    Icon,
    List,
    Empty,
} from "vant";
import jfBg from '@/assets/jf_bg.png';
import { getJifenList } from '@/model/api';
export default {
    components: {
        NavBar,
        Icon,
        List,
        Empty,
    },
    data() {
        return {
            jfBg,
            jifen:0,
            loading:false,
            list:[],
            total:0,
            noData:false,
        };
    },
    methods: {
        tojifenchange() {
            this.$router.push({
                name: "jifenchange"
            })
        },
        toWalletInfo(){
            this.$router.push({
                name:"atricle",
                query:{
                    mode:6,
                }
            })
        },
        async getList(refresh = false){
            let {code , data , count , score } = await getJifenList({
                start:refresh ? 0 : this.list.length, 
            });
            if(code == 1){
                this.jifen = score;
                this.list = refresh ? data :this.list.concat(data);
                this.total = count;
            }
            this.noData = this.list.length == 0;
        }
    },
    created(){
        this.getList();
    },
    computed:{
        finished(){
            return this.list.length == this.total && this.total > 0;
        }
    }
    

};
</script>

<style lang="less" scoped>
.container {
    background-color: #fff;
}

.list {
    width: 100%;
    height: auto;
    padding: 0 14px;

    .item {
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px solid #EAEAEA;
    }

    .txt {
        width: 100%;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #222222;
        margin-bottom: 8px;
    }

    .time {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #9A9A9A;
    }

    .right-a {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FF5522;
    }

    .right-b {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #666666;
    }
}

.jifen-card {
    width: 366px;
    height: 99px;
    margin: 0 auto;
    background-size: 100% 100%;
    padding: 15px 18px 18px;

    .spa {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        margin-right: 10px;
    }

    .spb {
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
    }
    .spc{
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 5px;
    }
    .right {
        width: 55px;
        height: 22px;
        background: #FFFFFF;
        box-shadow: 0px 1px 3px 0px rgba(247, 175, 95, 0.67);
        border-radius: 5px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #F7AF5F;
    }
}
</style>
